/**
 * 任务列表
 * 1. 连接store，获取数据
 * 2. react-redux插件：connect(state)(MyComponent)
 */
import React from 'react';

function TodoList(props) {
  // console.log('获取store列表数据：', props)
  const { list, toggle, del } = props;

  // 切换任务状态
  const toggleStatus = (id) => {
    // 修改store数据：现有数据，改变done的值
    toggle(id)
  }

  // 删除任务的事件处理函数
  const delTodo = (id) => {
    // 修改store: 删除
    del(id)
  }

  // 没有数据=》提示
  if (!list?.length) {
    return (
      <p>暂无待办事项！</p>
    )
  }

  return (
    <ul>
      {
        list.map((item) => <li key={item.id}>
          <span className={item.done ? 'done' : ''} onClick={() => toggleStatus(item.id)}>{item.task}</span>
          {/* 删除按钮 */}
          <button onClick={() => delTodo(item.id)} className="btn-status del">&times;</button>
          {
            item.done && <button className='btn-status ok'>&radic;</button>
          }
        </li>)
      }
      {/* <li>
        <span className='done'>睡觉</span>
        <button className='btn-status ok'>&radic;</button>
        <button className="btn-status del">&times;</button>
      </li> */}
    </ul>
  );
}

export default TodoList